<template>
	<view class="container">
		<view class="title">本次录入顾客</view>
		<view class="customer_list">
			<u-radio-group v-model="radiovalue" placement="column">
				<block v-for="(item, index) in curCustomerList" :ket="index">
					<view class="u-flex u-flex-items-center list" @click="radioChange(item)">
						<view class="radio_box">
							<u-radio :name="item.id" @change="radioChange(item)"></u-radio>
						</view>
						<view class="avatar">
							<u-avatar shape="square" :src="item.customerProfile||'/static/imagse/avatar.png'"></u-avatar>
						</view>
						<view class="customer_info">
							<view class="u-flex u-flex-items-center">
								<text class="name Medium">{{item.name}}</text>
								<uni-icons v-if="item.gender==1" size="20" color="#2F86F6" custom-prefix="iconfont" type="icon-nansheng"></uni-icons>
								<uni-icons v-if="item.gender==0" size="20" color="#FF8080" custom-prefix="iconfont" type="icon-nvsheng"></uni-icons>
								<text v-if="item.ages" class="ages">{{item.ages}}岁</text>
							</view>
						</view>
					</view>
				</block>
			</u-radio-group>
		</view>
		<view class="title">系统已存在顾客</view>
		<view class="customer_list">
			<u-radio-group v-model="radiovalue" placement="column">
				<block v-for="(item, index) in oldCustomerList" :ket="index">
					<view class="u-flex u-flex-items-start list" @click="radioChange(item)">
						<view class="radio_box" style="margin-top: 12rpx;">
							<u-radio :name="item.id" @change="radioChange(item)"></u-radio>
						</view>
						<view class="avatar">
							<u-avatar shape="square" :src="item.customerProfile||'/static/imagse/avatar.png'"></u-avatar>
						</view>
						<view class="customer_info">
							<view class="u-flex u-flex-items-center u-flex-items-start">
								<text class="name Medium">{{item.name}}</text>
								<uni-icons v-if="item.gender==1" size="20" color="#2F86F6" custom-prefix="iconfont" type="icon-nansheng"></uni-icons>
								<uni-icons v-if="item.gender==0" size="20" color="#FF8080" custom-prefix="iconfont" type="icon-nvsheng"></uni-icons>
								<text v-if="item.ages" class="ages">{{item.ages}}岁</text>
							</view>
							<view class="appointment_time">上次预约日期：{{item.makeTime}}</view>
							<view v-if="item.isContain==100" class="customer_type invited">已邀约</view>
							<view v-else class="customer_type uninvited">未邀约</view>
						</view>
					</view>
				</block>
			</u-radio-group>
		</view>
		<view class="u-flex u-flex-center u-flex-items-end btn">
			<button hover-class="none" class="u-flex u-flex-y-center u-flex-x-center submit" @click="submit">
				<text>确定</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		repeatCustomerList
	} from '@/config/api.js';
	export default {
		data() {
			return {
				customer: {}, //传入的顾客数据
				chooseItem: {}, //选中的顾客数据
				radiovalue: '',
				curCustomerList: [], //本次录入顾客
				oldCustomerList: [], //系统已存在顾客
			};
		},
		onLoad(options) {
			var that = this;
			let pages = getCurrentPages();
			let prePage = pages[pages.length - 2]; //上一个页面
			if (options && options.params && options.customer) {
				that.params = JSON.parse(options.params);
				that.customer = JSON.parse(options.customer);
				that.getRepeatCustomer();
			}
			uni.showModal({
				title: "温馨提示",
				content: "您录入的顾客和系统已存在的顾客重名，请从已存在顾客中选择进行提交，非同一顾客请修改顾客名称进行提交。",
				showCancel: false,
				confirmText: "确认",
				confirmColor: '#2F86F6',
			});
		},
		methods: {
			radioChange(item) {
				this.chooseItem = item;
			},
			getRepeatCustomer() {
				var that = this;
				let params = that.params;
				repeatCustomerList(params).then(res => {
					that.curCustomerList = [that.customer];
					that.oldCustomerList = res.data;
				}).catch(err => {
					console.log('repeatCustomerList=', err);
				});
			},
			submit() {
				var that = this;
				let pages = getCurrentPages();
				let prePage = pages[pages.length - 2]; //上一个页面
				if (that.chooseItem.id == '') {
					return false;
				} else {
					if (that.chooseItem.id == 'jyxm') {
						prePage.$vm.name = that.chooseItem.name;
						prePage.$vm.sex = that.chooseItem.gender;
						prePage.$vm.mobile = that.chooseItem.memberPhone;
						prePage.$vm.remark = that.chooseItem.demand;
						prePage.$vm.soure = that.chooseItem.soure;
						uni.navigateBack();
					} else if (that.chooseItem.id != 'jyxm' && that.chooseItem.isContain == 100) {
						uni.showModal({
							title: '提示',
							content: '您选择的【' + that.chooseItem.name + '】顾客已经参与本次活动，是否还要继续邀约？',
							showCancel: true,
							success: function(e) {
								if (e.confirm) {
									prePage.$vm.name = that.chooseItem.name;
									prePage.$vm.sex = that.chooseItem.gender;
									prePage.$vm.mobile = that.chooseItem.memberPhone;
									prePage.$vm.remark = that.chooseItem.demand;
									prePage.$vm.soure = that.chooseItem.soure;
									prePage.$vm.mId = that.chooseItem.id;
									prePage.$vm.disabled = true;
									uni.navigateBack();
								}
							}
						});
					} else if (that.chooseItem.id != 'jyxm' && that.chooseItem.isContain != 100) {
						prePage.$vm.name = that.chooseItem.name;
						prePage.$vm.sex = that.chooseItem.gender;
						prePage.$vm.mobile = that.chooseItem.memberPhone;
						prePage.$vm.remark = that.chooseItem.demand;
						prePage.$vm.soure = that.chooseItem.soure;
						prePage.$vm.mId = that.chooseItem.id;
						prePage.$vm.disabled = true;
						uni.navigateBack();
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F4F4;

		.container {
			padding-bottom: calc(126rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(126rpx + env(safe-area-inset-bottom));

			.title {
				padding: 26rpx 20rpx;
				height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.customer_list {
				padding: 2rpx 20rpx;

				.list {
					padding: 30rpx 20rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					margin-bottom: 20rpx;
					width: 100%;

					.radio_box {
						margin: 0 8rpx 0 0;
					}

					.avatar {
						width: 88rpx;
						height: 88rpx;
						background-color: #DDDDDD;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.customer_info {
						margin-left: 20rpx;

						.name {

							font-size: 30rpx;
							line-height: 34rpx;
							color: #333333;
							margin-right: 20rpx;
						}

						.ages {
							margin-left: 20rpx;

							font-size: 30rpx;
							line-height: 34rpx;
							color: #888888;
						}

						.appointment_time {
							color: rgba(136, 136, 136, 1);
							font-size: 28rpx;

							line-height: 32rpx;
							margin-top: 20rpx;
						}

						.customer_type {
							width: 100rpx;
							height: 40rpx;
							border: 2rpx solid transparent;
							border-radius: 4rpx;
							font-size: 24rpx;
							text-align: center;
							line-height: 40rpx;
							margin-top: 16rpx;
						}

						.invited {
							color: #A72126;
							border-color: #A72126;
						}

						.uninvited {
							color: #2F86F6;
							border-color: #2F86F6;
						}

						.appointment_type {
							width: 100rpx;
							height: 40rpx;
							border: 2rpx solid #DDDDDD;
							border-radius: 4rpx;
							font-size: 24rpx;
							line-height: 40rpx;
							color: #888888;
							text-align: center;
							margin-top: 14rpx;
						}
					}
				}
			}

			.btn {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
				padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
				z-index: 10;
				width: 100vw;
				height: 96rpx;
				background-color: #FFFFFF;

				.submit {
					width: 320rpx;
					height: 80rpx;
					background-color: #4179FF;
					box-sizing: border-box;
					border-radius: 40rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>